<template>
  <div class="container">
    <el-select
      v-model="selectedESAlarm"
      @change="createESAlarm"
      placeholder="请选择警报样式"
      size="large"
      style="width: 180px"
    >
      <el-option v-for="item in ESAlarmData" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>
    <div class="btn-box">
      <el-button type="danger" @click="destroyLastAlarm" :disabled="alarmList.length === 0"
        >销毁最近警报</el-button
      >
      <el-button type="danger" @click="destroyAllAlarms" :disabled="alarmList.length === 0"
        >销毁所有警报</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ESAlarm } from 'earthsdk3'
import { ElMessage } from 'element-plus' // 添加 ElMessage 引入 已有引入插件,但是防止eslint 报错
const props = defineProps({
  objm: {
    type: Object,
    required: true,
  },
})
const selectedESAlarm = ref(null)
const ESAlarmData = ref([
  { id: '1', name: '柱状警告', mode: 'cylinder', radius: 20 },
  { id: '2', name: '圆形警告', mode: 'circle', radius: 50 },
])

// 存储创建的所有警报对象
const alarmList = ref([])

const createESAlarm = () => {
  // 根据选中的ID找到对应的警报配置
  const selectedAlarm = ESAlarmData.value.find((item) => item.id === selectedESAlarm.value)
  if (!selectedAlarm) return
  const sceneObjectESAlarm = props.objm.createSceneObject(ESAlarm) //objm.createSceneObject('ESAlarm')  根据类名 'ES' 无需引入
  if (!sceneObjectESAlarm) return
  sceneObjectESAlarm.mode = selectedAlarm.mode //报警样式
  sceneObjectESAlarm.radius = selectedAlarm.radius //报警半径大小
  sceneObjectESAlarm.allowPicking = true
  sceneObjectESAlarm.editing = true //打开编辑
  sceneObjectESAlarm.pickedEvent.don((e) => {
    switch (e.attachedInfo) {
      case 'clickPick':
        console.log('单击拾取了报警对象')
        break
      case 'hoverPick':
        console.log('悬浮拾取了报警对象')
        break
      default:
        break
    }
  })

  // 将新创建的警报添加到列表中
  alarmList.value.push(sceneObjectESAlarm)
  // 绑定到window对象方便调试
  window.ESAlarm = sceneObjectESAlarm
  // 创建后清空选择
  selectedESAlarm.value = ''
}

// 销毁最近创建的警报
const destroyLastAlarm = () => {
  if (alarmList.value.length > 0) {
    // 获取数组最后一项（最近创建的警报）
    const lastAlarm = alarmList.value.pop() //1.删除数组中的最后一个元素 2.返回被删除的元素
    // 销毁该警报对象
    props.objm.destroySceneObject(lastAlarm)
    ElMessage({
      message: '已删除最近创建的一项警报',
      type: 'success',
      showClose: true, //信息关闭按钮
      grouping: true, //相同信息合并
      duration: 1000, //显示时间
    })
  }
}
// 销毁所有警报
const destroyAllAlarms = () => {
  if (alarmList.value.length > 0) {
    // 遍历销毁所有警报对象
    alarmList.value.forEach((alarm) => {
      props.objm.destroySceneObject(alarm)
    })
    // 清空列表
    alarmList.value = []
    ElMessage({
      message: '已删除所有警报',
      type: 'success',
      showClose: true, //信息关闭按钮
      grouping: true, //相同信息合并
      duration: 1000, //显示时间
    })
  }
}
</script>
<style lang="scss" scoped>
.container {
  position: absolute;
  top: 80px;
  left: 360px;
  width: 340px;
  padding: 10px;
  border-radius: 5px;
  background-color: rgba(29, 37, 45, 0.8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  button {
    width: 150px;
    height: 40px;
  }
}
</style>
